{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '弹窗插件:example/layer/index', 'layer弹窗插件'])}
<style>
    body[data-theme|='translucent'] div:not(.layui-layer-hui):not(.layui-layer-tips):not([class*='bg-']) .layui-layer-content,
    [data-theme='dark'] .layui-layer-content {
        color: var(--bs-body-color);
    }
    body[data-theme|='translucent'] .layui-layer-content .form-control {
        border: 1px solid var(--bs-gray-300);
        color: var(--bs-body-color);
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">layer</div>
        </header>
        <div class="card-body">
        
          <p>layer是一款非常好用的插件，相信很多小伙伴都使用过，插件使用layer v3.1.1，文档地址：<a href="https://layui.gitee.io/v2/layer/" target="_blank">https://layui.gitee.io/v2/layer/</a>。为了更合适光年模板，这里对插件做了一些调整，去除了一些图片，调整为字体图标，调整了颜色搭配。
        <div class="callout callout-danger mt-3 mb-3">弹窗动画完成后，谷歌浏览器下有一个hover的bug，鼠标移到最后一个按钮时，字有1px的移动。</div>
        
        <p><strong>使用弹窗</strong></p>
        <div class="border-example"><button class="btn btn-default" id="example-1">初始</button></div>
        <pre>$('#example-1').click(function() {
  layer.alert('钱月英酬神还愿　冯子清误入桃园');
});</pre>
        
        <p><strong>使用图标</strong></p>
        <p>为了更易识别，这里将图标的设置值改为：<code>success</code>、<code>error</code>、<code>doubt</code>、<code>lock</code>、<code>cry</code>、<code>smile</code>、<code>warning</code>。</p>
        <div class="border-example">
          <div id="example-icon">
            <button class="btn btn-primary" data-icon="success">正确</button>
            <button class="btn btn-danger" data-icon="error">错误</button>
            <button class="btn btn-yellow" data-icon="doubt">疑问</button>
            <button class="btn btn-secondary" data-icon="lock">锁定</button>
            <button class="btn btn-pink" data-icon="cry">哭脸</button>
            <button class="btn btn-success" data-icon="smile">笑脸</button>
            <button class="btn btn-warning" data-icon="warning">警告</button>
          </div>
        </div>
        <pre>&lt;p id="example-icon"&gt;
&lt;button class="btn btn-primary" data-icon="success"&gt;正确&lt;/button&gt;
&lt;button class="btn btn-danger" data-icon="error"&gt;错误&lt;/button&gt;
&lt;button class="btn btn-yellow" data-icon="doubt"&gt;疑问&lt;/button&gt;
&lt;button class="btn btn-secondary" data-icon="lock"&gt;锁定&lt;/button&gt;
&lt;button class="btn btn-pink" data-icon="cry"&gt;哭脸&lt;/button&gt;
&lt;button class="btn btn-success" data-icon="smile"&gt;笑脸&lt;/button&gt;
&lt;button class="btn btn-warning" data-icon="warning"&gt;警告&lt;/button&gt;
&lt;/p&gt;

// 使用图标
$('#example-icon').find('.btn').click(function() {
  layer.alert('赠金扇冯旭得意　拜天地翠秀许婚', {
    icon: $(this).data('icon'),
  })
});</pre>
        
        <p><strong>询问框</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-2">询问</button>
        </div>
        <pre>layer.confirm('游西湖林璋遇故　卖宝剑马云逢凶？', {
  btn: ['重要', '奇葩'] //按钮
}, function(){
  layer.msg('的确很重要', {icon: 'success'});
}, function(){
  layer.msg('也可以这样', {
      time: 20000, //20s后自动关闭
      btn: ['明白了', '知道了']
  });
});</pre>
        
        <p><strong>提示层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-3">提示层</button>
          <button class="btn btn-default" id="example-14">loading层</button>
        </div>
        <pre>layer.msg('马云大闹五柳园　汤彪仗义赠金帛');
layer.msg('诸葛亮智算华容　关云长义释曹操', function(){
  //关闭后的操作
});</pre>
        
        <p><strong>风格</strong></p>
        <p>这里新增了弹窗的样式皮肤：<code>lyear-skin-primary</code>、<code>lyear-skin-success</code>、<code>lyear-skin-info</code>、<code>lyear-skin-warning</code>、<code>lyear-skin-danger</code>、<code>lyear-skin-secondary</code>、<code>lyear-skin-purple</code>、<code>lyear-skin-pink</code>、<code>lyear-skin-cyan</code>、<code>lyear-skin-yellow</code>、<code>lyear-skin-brown</code>、<code>lyear-skin-dark</code>。</p>
        <div class="border-example">
          <div id="example-skin">
            <button class="btn btn-primary" data-skin="lyear-skin-primary">主色</button>
            <button class="btn btn-success" data-skin="lyear-skin-success">成功</button>
            <button class="btn btn-info" data-skin="lyear-skin-info">信息</button>
            <button class="btn btn-warning" data-skin="lyear-skin-warning">警告</button>
            <button class="btn btn-danger" data-skin="lyear-skin-danger">错误</button>
            <button class="btn btn-secondary" data-skin="lyear-skin-secondary">灰色</button>
            <button class="btn btn-purple" data-skin="lyear-skin-purple">紫色</button>
            <button class="btn btn-pink" data-skin="lyear-skin-pink">粉红</button>
            <button class="btn btn-cyan" data-skin="lyear-skin-cyan">青色</button>
            <button class="btn btn-yellow" data-skin="lyear-skin-yellow">黄色</button>
            <button class="btn btn-brown" data-skin="lyear-skin-brown">棕色</button>
            <button class="btn btn-dark" data-skin="lyear-skin-dark">黑色</button>
          </div>
        </div>
        <pre>&lt;div id="example-skin"&gt;
&lt;button class="btn btn-primary" data-skin="lyear-skin-primary"&gt;主色&lt;/button&gt;
&lt;button class="btn btn-success" data-skin="lyear-skin-success"&gt;成功&lt;/button&gt;
&lt;button class="btn btn-info" data-skin="lyear-skin-info"&gt;信息&lt;/button&gt;
&lt;button class="btn btn-warning" data-skin="lyear-skin-warning"&gt;警告&lt;/button&gt;
&lt;button class="btn btn-danger" data-skin="lyear-skin-danger"&gt;错误&lt;/button&gt;
&lt;button class="btn btn-secondary" data-skin="lyear-skin-secondary"&gt;灰色&lt;/button&gt;
&lt;button class="btn btn-purple" data-skin="lyear-skin-purple"&gt;紫色&lt;/button&gt;
&lt;button class="btn btn-pink" data-skin="lyear-skin-pink"&gt;粉红&lt;/button&gt;
&lt;button class="btn btn-cyan" data-skin="lyear-skin-cyan"&gt;青色&lt;/button&gt;
&lt;button class="btn btn-yellow" data-skin="lyear-skin-yellow"&gt;黄色&lt;/button&gt;
&lt;button class="btn btn-brown" data-skin="lyear-skin-brown"&gt;棕色&lt;/button&gt;
&lt;button class="btn btn-dark" data-skin="lyear-skin-dark"&gt;黑色&lt;/button&gt;
&lt;/div&gt;

// 风格
$('#example-skin').find('.btn').click(function() {
  layer.alert('真才子走笔成章　假斯文揉碎肚肠', {
      skin: $(this).data('skin'),
  });
});</pre>
        
        <p><strong>捕获页</strong></p>
        <div class="border-example">
          <div class="test-example-4">
            <ul class="list-unstyled p-3 mb-0">
              <li>第06回　姚夏封广陵风鉴　常万青南海朝山</li>
              <li>第07回　朱翰林代为月老　冯子清聘定月英</li>
              <li>第08回　魏家妇人前卖俏　花文芳黑夜偷情</li>
            </ul>
          </div>
          <button class="btn btn-default" id="example-4">捕获页</button>
        </div>
        <pre>&lt;div class="test-example-4"&gt;
&lt;ul class="list-unstyled p-3 mb-0"&gt;
  &lt;li&gt;第06回　姚夏封广陵风鉴　常万青南海朝山&lt;/li&gt;
  &lt;li&gt;第07回　朱翰林代为月老　冯子清聘定月英&lt;/li&gt;
  &lt;li&gt;第08回　魏家妇人前卖俏　花文芳黑夜偷情&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;button class="btn btn-default" id="example-4"&gt;捕获页&lt;/button&gt;
          
// 捕获页
$('#example-4').click(function() {
  layer.open({
      type: 1,
      shade: false,
      title: false, //不显示标题
      content: $('.test-example-4'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function(){
          layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 'success'});
      }
  });
});</pre>
        
        <p><strong>页面层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-5">页面层</button>
        </div>
        <pre>$('#example-5').click(function() {
  layer.open({
      type: 1,
      skin: 'layui-layer-rim',  // 加上边框
      area: ['420px', '240px'], // 宽高
      content: '&lt;div class="p-3"&gt;魏临川于中取利　花文芳将计就计&lt;/div&gt;'
  });
});</pre>
        
        <p><strong>tips层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-6">Tips层</button>
        </div>
        <pre>$('#example-6').click(function() {
  layer.tips('Hi，我是tips', '#example-6');
});</pre>
        
        <p><strong>iframe层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-7">iframe层</button>
        </div>
        <pre>$('#example-7').click(function() {
  layer.open({
      type: 2,
      title: 'Light Year Admin',
      shadeClose: true,
      shade: 0.5,
      area: ['380px', '90%'],
      content: 'http://lyear.itshubao.com' //iframe的url
  });
});</pre>
        
        <p><strong>iframe窗</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-8">iframe窗</button>
        </div>
        <pre>$('#example-8').click(function() {
  layer.open({
      type: 2,
      title: false,
      closeBtn: 0, //不显示关闭按钮
      shade: [0],
      area: ['340px', '215px'],
      offset: 'rb', //右下角弹出
      time: 2000, //2秒后自动关闭
      anim: 2,
      content: ['./data/card-reload.txt', 'no'], //iframe的url，no代表不显示滚动条
      end: function(){ //此处用于演示
          layer.open({
              type: 2,
              title: '很多时候，我们想最大化看，比如像这个页面。',
              shadeClose: true,
              shade: false,
              maxmin: true, //开启最大化最小化按钮
              area: ['893px', '600px'],
              content: '//lyear.itshubao.com/'
          });
      }
  });
});</pre>
        
        <p><strong>加载层</strong></p>
        <p>这里将gif动画改为 <code>css3</code> 动画，风格仍然保留0-2。</p>
        <div class="border-example">
          <div id="example-loading">
            <button class="btn btn-default" data-effect='0'>加载层一</button>
            <button class="btn btn-default" data-effect='1'>加载层二</button>
            <button class="btn btn-default" data-effect='2'>加载层三</button>
          </div>
        </div>
        <pre>$('#example-loading').find('.btn').click(function() {
  var index = layer.load($(this).data('effect'), { shade: false }); // 第一个参数为风格，支持0-2
  setTimeout(function(){
      layer.close(index)
  }, 3000);
});</pre>
        
        <p><strong>loading层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-9">loading层</button>
        </div>
        <pre>$('#example-9').click(function() {
  var index = layer.load(0, { shade:  [0.1, '#000'] });  // 0.1透明度的白色背景
  setTimeout(function(){
      layer.close(index)
  }, 3000);
});</pre>
        
        <p><strong>小tips</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-10">小tips</button>
        </div>
        <pre>$('#example-10').click(function() {
  layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#example-10', {
    tips: [1, '#33cabb'],
    time: 4000
  });
});</pre>
        
        <p><strong>prompt层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-11">prompt层</button>
        </div>
        <pre>$('#example-11').click(function() {
  layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
      layer.close(index);
      layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
          layer.close(index);
          layer.msg('演示完毕！您的口令：'+ pass +'&lt;br&gt;您最后写下了：'+text);
    });
  });
});</pre>
        
        <p><strong>相册层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-13">相册层</button>
        </div>
        <pre>$('#example-13').click(function() {
  var json = {
    "status": 1,
    "msg": "",
    "title": "JSON请求的相册",
    "id": 8,
    "start": 0,
    "data": [{
        "alt": "花", "pid": 109, "src": "//libs.itshubao.com/pic/small_007.jpg", "thumb": ""
      },
      {
        "alt": "油菜花", "pid": 110, "src": "//libs.itshubao.com/pic/medium_003.jpg", "thumb": ""
      },
      {
        "alt": "粉红", "pid": 111, "src": "images/gallery/1.jpg", "thumb": ""
      },
      {
        "alt": "牵牛花", "pid": 112, "src": "//libs.itshubao.com/pic/big_005.jpg", "thumb": ""
      },
      {
        "alt": "大娃",  "pid": 113, "src": "images/users/avatar-1.png", "thumb": ""
      }]
  };
  layer.photos({
      photos: json // 格式见API文档手册页
      , anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
  });
});</pre>
        
        <p><strong>信息框</strong></p>
        <p>模板信息框是白色背景的，你也可以用 <code>bg-*</code> 来增加信息框背景样式。</p>
        <div class="border-example">
          <div id="example-notice">
            <button class="btn btn-default">默认</button>
            <button class="btn btn-primary" data-bg="bg-primary">主色</button>
            <button class="btn btn-success" data-bg="bg-success">成功</button>
            <button class="btn btn-info" data-bg="bg-info">信息</button>
            <button class="btn btn-warning" data-bg="bg-warning">警告</button>
            <button class="btn btn-danger" data-bg="bg-danger">错误</button>
            <button class="btn btn-secondary" data-bg="bg-secondary">灰色</button>
            <button class="btn btn-purple" data-bg="bg-purple">紫色</button>
            <button class="btn btn-pink" data-bg="bg-pink">粉红</button>
            <button class="btn btn-cyan" data-bg="bg-cyan">青色</button>
            <button class="btn btn-yellow" data-bg="bg-yellow">黄色</button>
            <button class="btn btn-brown" data-bg="bg-brown">棕色</button>
            <button class="btn btn-dark" data-bg="bg-dark">黑色</button>
          </div>
        </div>
        <pre>&lt;div id="example-notice"&gt;
&lt;button class="btn btn-default"&gt;默认&lt;/button&gt;
&lt;button class="btn btn-primary" data-bg="bg-primary"&gt;主色&lt;/button&gt;
&lt;button class="btn btn-success" data-bg="bg-success"&gt;成功&lt;/button&gt;
&lt;button class="btn btn-info" data-bg="bg-info"&gt;信息&lt;/button&gt;
&lt;button class="btn btn-warning" data-bg="bg-warning"&gt;警告&lt;/button&gt;
&lt;button class="btn btn-danger" data-bg="bg-danger"&gt;错误&lt;/button&gt;
&lt;button class="btn btn-secondary" data-bg="bg-secondary"&gt;灰色&lt;/button&gt;
&lt;button class="btn btn-purple" data-bg="bg-purple"&gt;紫色&lt;/button&gt;
&lt;button class="btn btn-pink" data-bg="bg-pink"&gt;粉红&lt;/button&gt;
&lt;button class="btn btn-cyan" data-bg="bg-cyan"&gt;青色&lt;/button&gt;
&lt;button class="btn btn-yellow" data-bg="bg-yellow"&gt;黄色&lt;/button&gt;
&lt;button class="btn btn-brown" data-bg="bg-brown"&gt;棕色&lt;/button&gt;
&lt;button class="btn btn-dark" data-bg="bg-dark"&gt;黑色&lt;/button&gt;
&lt;/div&gt;

// 信息框
$('#example-notice').find('.btn').click(function() {
  layer.msg('不开心。。。', {
      icon: 'cry',
      skin: $(this).data('bg')
  });
});</pre>
        
        <p><strong>自定义页面层</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="emample-15">自定义页面层</button>
        </div>
        <pre>layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  shadeClose: true,
  skin: 'bg-success',
  content: '&lt;div class="p-3"&gt;&lt;h6&gt;采桑子·时光只解催人老&lt;/h6&gt;时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。&lt;br&gt;梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？&lt;/div&gt;'
});</pre>
        
        <p><strong>tips层位置</strong></p>
        <div class="border-example">
          <button class="btn btn-default" id="example-top">上</button>
          <button class="btn btn-default" id="example-bottom">下</button>
          <button class="btn btn-default" id="example-left">左</button>
          <button class="btn btn-default" id="example-right">右</button>
          <button class="btn btn-default" id="example-more">多个</button>
        </div>
        <pre>$('#example-top').click(function() {
  layer.tips('上', $(this), {
      tips: [1, '#000']
  });
});
$('#example-right').click(function() {
  layer.tips('默认就是向右的', $(this));
});
$('#example-bottom').click(function() {
  layer.tips('下', $(this), {
      tips: 3
  });
});
$('#example-left').click(function() {
  layer.tips('在很久以前……', $(this), {
      tips: [4, '#33cabb'],
      time: 300000
  });
});
$('#example-more').click(function() {
  layer.tips('不会销毁之前的', $(this), {tipsMore: true});
});</pre>
        
        <p><strong>弹出位置</strong></p>
        <div class="border-example">
          <div id="example-position">
            <button class="btn btn-default" data-position="t">上弹出</button>
            <button class="btn btn-default" data-position="r">右弹出</button>
            <button class="btn btn-default" data-position="b">下弹出</button>
            <button class="btn btn-default" data-position="l">左弹出</button>
            <button class="btn btn-default" data-position="lt">左上弹出</button>
            <button class="btn btn-default" data-position="lb">左下弹出</button>
            <button class="btn btn-default" data-position="rt">右上弹出</button>
            <button class="btn btn-default" data-position="rb">右下弹出</button>
            <button class="btn btn-default" data-position="auto">居中弹出</button>
          </div>
        </div>
        <pre>$('#example-position').find('.btn').click(function() {
  var type = $(this).data('position'),
      text = $(this).text();
  
  layer.open({
      type: 1
      ,offset: $(this).data('position') //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
      ,id: 'LAY_demo'+type //防止重复弹出
      ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
      ,btn: '关闭全部'
      ,btnAlign: 'c'
      ,shade: 0
      ,yes: function(){
          layer.closeAll();
      }
  });
});</pre>
        
        </div>
      </div>
  </div>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-1').click(function() {
            layer.alert('钱月英酬神还愿　冯子清误入桃园');
        });
        
        // 使用图标
        $('#example-icon').find('.btn').click(function() {
            layer.alert('赠金扇冯旭得意　拜天地翠秀许婚', {
              icon: $(this).data('icon'),
            })
        });
        
        // 询问框
        $('#example-2').click(function() {
            layer.confirm('游西湖林璋遇故　卖宝剑马云逢凶？', {
                btn: ['重要', '奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 'success'});
            }, function(){
                layer.msg('也可以这样', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        });
        
        // 提示层
        $('#example-3').click(function() {
            layer.msg('马云大闹五柳园　汤彪仗义赠金帛');
        });
        
        // 风格
        $('#example-skin').find('.btn').click(function() {
            layer.alert('真才子走笔成章　假斯文揉碎肚肠', {
                skin: $(this).data('skin'),
            });
        });
        
        // 捕获页
        $('#example-4').click(function() {
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                content: $('.test-example-4'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function(){
                    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 'success'});
                }
            });
        });
        
        // 页面层
        $('#example-5').click(function() {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',  // 加上边框
                area: ['420px', '240px'], // 宽高
                content: '<div class="p-3">魏临川于中取利　花文芳将计就计</div>'
            });
        });
        
        // tips层
        $('#example-6').click(function() {
            layer.tips('Hi，我是tips', '#example-6');
        });
        
        // iframe层
        $('#example-7').click(function() {
            layer.open({
                type: 2,
                title: 'Admin',
                shadeClose: true,
                shade: 0.5,
                area: ['380px', '90%'],
                content: "{:url('example/layout/index')}?iframe=1" //iframe的url
            });
        });
        
        // iframe窗
        $('#example-8').click(function() {
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0, //不显示关闭按钮
                shade: [0],
                area: ['340px', '215px'],
                offset: 'rb', //右下角弹出
                time: 2000, //2秒后自动关闭
                anim: 2,
                content: ["{$xpConfig['web_static']}/example/card-reload.txt", 'no'], //iframe的url，no代表不显示滚动条
                end: function(){ //此处用于演示
                    layer.open({
                        type: 2,
                        title: '很多时候，我们想最大化看，比如像这个页面。',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                        content: "{:url('example/layout/index')}?iframe=1"
                    });
                }
            });
        });
        
        // 加载层
        $('#example-loading').find('.btn').click(function() {
            var index = layer.load($(this).data('effect'), { shade: false }); // 第一个参数为风格，支持0-2
            setTimeout(function(){
                layer.close(index)
            }, 3000);
        });
        
        // loading层
        $('#example-9').click(function() {
            var index = layer.load(0, { shade:  [0.1, '#000'] });  // 0.1透明度的白色背景
            setTimeout(function(){
                layer.close(index)
            }, 3000);
        });
        
        // 小tips
        $('#example-10').click(function() {
            layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#example-10', {
              tips: [1, '#33cabb'],
              time: 4000
            });
        });
        
        // prompt层
        $('#example-11').click(function() {
            layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
                layer.close(index);
                layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                    layer.close(index);
                    layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
              });
            });
        });
        
        // tab层
        $('#example-12').click(function() {
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: '浣溪沙', 
                    content: '<div class="p-3">一向年光有限身，<br>等闲离别易销魂。<br>酒筵歌席莫辞频。<br><br>满目山河空念远，<br>落花风雨更伤春。<br>不如怜取眼前人。</div>'
                }, {
                   title: '清平乐·红笺小字', 
                    content: '<div class="p-3">红笺小字，说尽平生意。<br>鸿雁在云鱼在水，惆怅此情难寄。<br><br>斜阳独倚西楼，遥山恰对帘钩。<br>人面不知何处，绿波依旧东流。</div>'
                }, {
                    title: '玉楼春', 
                    content: '<div class="p-3">燕鸿过后春归去。细算浮生千万绪。来如春梦几多时，去似朝云无觅处。<br>闻琴解佩神仙侣。挽断罗衣留不住。劝君莫作独醒人，烂醉花间应有数。</div>'
                }]
            });
        });
        
        // 相册层
        $('#example-13').click(function() {
            var json = {
              "status": 1,
              "msg": "",
              "title": "JSON请求的相册",
              "id": 8,
              "start": 0,
              "data": [{
                  "alt": "花", "pid": 109, "src": "//libs.itshubao.com/pic/small_007.jpg", "thumb": ""
                },
                {
                  "alt": "油菜花", "pid": 110, "src": "//libs.itshubao.com/pic/medium_003.jpg", "thumb": ""
                },
                {
                  "alt": "粉红", "pid": 111, "src": "images/gallery/1.jpg", "thumb": ""
                },
                {
                  "alt": "牵牛花", "pid": 112, "src": "//libs.itshubao.com/pic/big_005.jpg", "thumb": ""
                },
                {
                  "alt": "大娃",  "pid": 113, "src": "images/users/avatar-1.png", "thumb": ""
                }]
            };
            layer.photos({
                photos: json // 格式见API文档手册页
                , anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
            });
        });
        
        // 信息框
        $('#example-notice').find('.btn').click(function() {
            layer.msg('不开心。。。', {
                icon: 'cry',
                skin: $(this).data('bg')
            });
        });
        
        // 提示层 - 抖动
        $('#example-14').click(function() {
            layer.msg('诸葛亮智算华容　关云长义释曹操', function(){
                //关闭后的操作
            });
        });
      
        // 自定义页面层
        $('#emample-15').click(function() {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                skin: 'bg-success',
                content: '<div class="p-3"><h5>采桑子·时光只解催人老</h5>时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。<br>梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？</div>'
            });
        });
        
        // tips层位置
        $('#example-top').click(function() {
            layer.tips('上', $(this), {
                tips: [1, '#000']
            });
        });
        $('#example-right').click(function() {
            layer.tips('默认就是向右的', $(this));
        });
        $('#example-bottom').click(function() {
            layer.tips('下', $(this), {
                tips: 3
            });
        });
        $('#example-left').click(function() {
            layer.tips('在很久以前……', $(this), {
                tips: [4, '#33cabb'],
                time: 300000
            });
        });
        $('#example-more').click(function() {
            layer.tips('不会销毁之前的', $(this), {tipsMore: true});
        });
        
        // 弹出位置
        $('#example-position').find('.btn').click(function() {
            var type = $(this).data('position'),
                text = $(this).text();
            
            layer.open({
                type: 1
                ,offset: $(this).data('position') //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                ,id: 'LAY_demo'+type //防止重复弹出
                ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
                ,btn: '关闭全部'
                ,btnAlign: 'c'
                ,shade: 0
                ,yes: function(){
                    layer.closeAll();
                }
            });
        });
    });
    </script>